import { ReactElement, useEffect, useId, useState } from 'react';
import {
  motion,
  stagger,
  useAnimate,
  useInView,
  useReducedMotion,
  Variants,
} from 'framer-motion';
import { AnimationProps } from './animation.model';

/**
 * Conformance animation.
 *
 * @param {Object} props - Object containing configuration options for the animation.
 * @param {boolean} [props.autoPlay=true] - Determines whether the animation should autoplay when in view.
 * @param {string} [props.className=''] - Optional CSS class name to apply to the SVG container.
 * @param {number} [props.inViewThreshold=0.3] - A threshold defining how much of the SVG should be visible in the viewport to trigger the animation. Value ranges from 0 to 1.
 * @param {boolean} [props.once=false] - If true, the animation will trigger only once when the SVG comes into view.
 * @param {number} [props.speed=1] - Controls the speed of the animation; higher numbers result in faster animations.
 *
 * @returns {ReactElement} A React SVG component wrapped with animations.
 */
export function ConformanceAnimation({
  autoPlay = true,
  className = '',
  inViewThreshold = 0.3,
  once = false,
  speed = 1,
}: AnimationProps): ReactElement {
  // Generate unique IDs for SVG elements to prevent conflicts when multiple instances exist
  const uniqueId = useId().replace(/:/g, '');
  const redGlow1Id = `red-glow-1-${uniqueId}`;
  const redGlow2Id = `red-glow-2-${uniqueId}`;
  const redGlow3Id = `red-glow-3-${uniqueId}`;

  const [scope, animate] = useAnimate();
  const isInView = useInView(scope, {
    amount: inViewThreshold,
    once,
  });
  const getDuration = (base: number) => base / speed;
  const willChangeStyle = {
    willChange: 'opacity, transform, fill, pathLength',
  };
  const prefersReducedMotion = useReducedMotion();
  const [animationsCompleted, setAnimationsCompleted] = useState(false);

  useEffect(() => {
    if (!isInView || animationsCompleted || !autoPlay) return;

    if (prefersReducedMotion) {
      // Single animate call with duration 0 for immediate final state
      const controls = animate(
        [
          ['.folder', { opacity: 1, y: 0 }],
          ['.folder-green', { fill: 'rgba(52, 211, 153, 0.3)' }],
          ['.folder-red', { fill: 'rgba(248, 113, 113, 0.3)' }],
          ['.zone-border', { pathLength: 1, opacity: 0.4 }],
          ['.zone-fill', { opacity: 0.05 }],
          ['.team-title', { opacity: 1, y: 0 }],
        ],
        {
          duration: 0,
          onComplete: () => setAnimationsCompleted(true),
          onError: (error: any) =>
            console.error('Applying final animation states failed:', error),
        }
      );

      return () => controls.stop();
    }

    // Animation starts
    const controls = animate(
      [
        // 1. Folders slide in from bottom (sequential by default)
        [
          '.folder',
          { opacity: 1, y: 0 },
          {
            duration: getDuration(0.8),
            ease: 'easeOut',
            delay: stagger(getDuration(0.2)),
          },
        ],

        'myLabel',
        // 2. Color transitions for folders - run in parallel with each other
        [
          '.folder-green',
          { fill: 'rgba(52, 211, 153, 0.3)' },
          {
            duration: getDuration(1.2),
            ease: 'easeInOut',
            delay: stagger(getDuration(0.2)),
            at: '>', // Start at the same time as the previous animation
          },
        ],
        [
          '.folder-red',
          { fill: 'rgba(248, 113, 113, 0.3)' },
          {
            duration: getDuration(1.2),
            ease: 'easeInOut',
            delay: stagger(getDuration(0.2)),
            at: '<', // Start at the same time as the previous animation
          },
        ],

        // 3. Initial fade in of the red glow elements - start 0.5s after previous animations
        [
          '.red-glow',
          { opacity: [0, 0.9], scale: [0.9, 1] },
          {
            duration: getDuration(1.2),
            ease: 'easeInOut',
            delay: stagger(getDuration(0.5)),
            at: '>',
          },
        ],
      ],
      {
        onComplete: () => setAnimationsCompleted(true),
        onError: (error: any) =>
          console.error('Animation sequence failed:', error),
      }
    );

    return () => controls.cancel();
  }, [
    animate,
    autoPlay,
    speed,
    prefersReducedMotion,
    animationsCompleted,
    isInView,
  ]);

  const folderVariants: Variants = {
    initial: {
      opacity: 0,
      y: 20,
    },
  };
  const redGlowVariants: Variants = {
    initial: {
      opacity: 0,
      scale: 0.8,
    },
  };
  const redGlowPulseVariants: Variants = {
    pulse: (i) => ({
      opacity: [0.9, 0.5, 0.7, 0.5, 0.9],
      scale: [1, 1.05, 1, 1.05, 1],
      transition: {
        duration: getDuration(3),
        ease: 'easeInOut',
        times: [0, 0.25, 0.5, 0.75, 1],
        repeat: Infinity,
        repeatType: 'loop',
        delay: i * getDuration(0.5),
      },
    }),
  };

  return (
    <motion.svg
      ref={scope}
      width="351"
      height="276"
      viewBox="0 0 351 276"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      style={willChangeStyle}
    >
      <g id="Steps">
        {/* Folder RightTop */}
        <motion.g
          className="folder"
          initial="initial"
          custom={0}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-red"
              d="M141.448 61.8171C139.934 60.9429 138.638 59.5729 137.561 57.707C136.484 55.8411 135.944 54.0324 135.942 52.281V14.1367C135.942 12.3884 136.482 11.2038 137.561 10.5829C138.64 9.962 139.936 10.087 141.448 10.958L157.965 20.4941L163.471 30.0301L185.493 42.7449C187.007 43.6191 188.304 44.9907 189.383 46.8597C190.462 48.7288 191.001 50.5359 190.999 52.281V84.0679C190.999 85.8162 190.46 87.0024 189.383 87.6265C188.306 88.2505 187.009 88.1239 185.493 87.2466L141.448 61.8171Z"
              fill="rgba(241, 245, 249, 0.3)"
              custom={0}
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M156.687 1.78357C156.687 1.78357 156.687 1.7835 156.572 1.10036C156.183 0.11447 156.183 0.1273 156.183 0.1273L156.184 0.126996L156.187 0.126462L156.195 0.124969C156.202 0.123793 156.211 0.12226 156.222 0.120427C156.243 0.11676 156.273 0.11188 156.311 0.10622C156.386 0.0949085 156.492 0.0675062 156.622 0.053338C156.881 0.0251072 157.243 -0.0024115 157.658 0.000168219C158.464 0.00517315 159.812 0.24803 160.763 0.795569L160.764 0.796029L177.484 10.4494L182.99 19.9855L204.809 32.583C206.484 33.5501 207.881 35.0471 209.019 37.0183C210.157 38.9895 210.755 40.9467 210.753 42.8784V74.6644C210.753 76.7181 209.645 78.433 208.292 79.2171L207.414 77.7016C208.215 77.2376 209.001 76.1073 209.001 74.6644V42.8765C209.003 41.318 208.523 39.6611 207.503 37.8941C206.482 36.1272 205.286 34.881 203.933 34.0998L181.708 21.2677L176.202 11.7316L159.889 2.31335L159.889 2.31315C159.327 1.98989 158.524 1.70298 157.831 1.69868C157.497 1.6966 157.204 1.71887 156.996 1.74158C156.892 1.75288 156.81 1.76416 156.757 1.77224C156.73 1.77628 156.71 1.7795 156.699 1.78152C156.693 1.78252 156.689 1.78322 156.687 1.78357C156.686 1.78372 156.685 1.78382 156.685 1.78382L156.686 1.78373L156.687 1.78357Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M189.461 87.8983L208.63 78.0703"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M185.764 42.6497L204.349 33.2109"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M163.578 29.8079L182.164 20.3691"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M157.35 20.2688L175.935 10.8301"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M137.695 10.1485L156.573 0.904297"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M191.213 52.1888L209.799 42.75"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <motion.path
              className="folder-red"
              d="M156.98 0.947266L139.733 10.0445L157.738 20.0894L163.614 30.1343L187.305 43.9697L190.337 48.1393L190.906 52.4984V87.1817L206.636 79.0321L210.048 75.8102V44.7278L209.479 40.7478L207.394 36.1992L204.551 33.5458L182.756 21.0371L177.07 10.9922L160.771 2.08442L156.98 0.947266Z"
              fill="rgba(241, 245, 249, 0.3)"
            />
          </g>
          <motion.g
            className="red-glow"
            initial="initial"
            variants={redGlowVariants}
            custom={0}
          >
            <motion.g
              id="Ellipse 25"
              filter={`url(#${redGlow1Id})`}
              animate="pulse"
              variants={redGlowPulseVariants}
              custom={0}
            >
              <circle
                cx="6"
                cy="6"
                r="6"
                transform="matrix(0.866025 0.5 0 1 157 43.2266)"
                fill="#F87171"
              />
            </motion.g>
          </motion.g>
        </motion.g>
        {/* Folder RightMiddle */}
        <motion.g
          className="folder"
          initial="initial"
          custom={1}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-green"
              d="M209.675 107.307C208.161 106.433 206.865 105.063 205.788 103.197C204.71 101.331 204.171 99.5227 204.169 97.7712V59.6269C204.169 57.8786 204.708 56.694 205.788 56.0731C206.867 55.4522 208.162 55.5773 209.675 56.4482L226.192 65.9843L231.697 75.5204L253.72 88.2351C255.234 89.1093 256.53 90.4809 257.61 92.35C258.689 94.219 259.227 96.0261 259.226 97.7712V129.558C259.226 131.306 258.687 132.493 257.61 133.117C256.532 133.741 255.236 133.614 253.72 132.737L209.675 107.307Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M224.913 47.2719C224.913 47.2719 224.914 47.2718 224.798 46.5886C224.409 45.6028 224.409 45.6156 224.409 45.6156L224.411 45.6153L224.414 45.6147L224.422 45.6133C224.429 45.6121 224.437 45.6105 224.448 45.6087C224.47 45.605 224.5 45.6002 224.537 45.5945C224.612 45.5832 224.718 45.5558 224.848 45.5416C225.107 45.5134 225.469 45.4859 225.885 45.4884C226.691 45.4935 228.039 45.7363 228.99 46.2839L228.99 46.2843L245.711 55.9377L251.216 65.4738L273.036 78.0712C274.711 79.0383 276.108 80.5354 277.246 82.5066C278.384 84.4778 278.981 86.435 278.979 88.3667V120.153C278.979 122.206 277.872 123.921 276.518 124.705L275.64 123.19C276.441 122.726 277.228 121.596 277.228 120.153V88.3648C277.229 86.8063 276.749 85.1494 275.729 83.3824C274.709 81.6155 273.513 80.3693 272.16 79.5881L249.934 66.756L244.428 57.2199L228.115 47.8016L228.115 47.8014C227.554 47.4782 226.751 47.1913 226.058 47.187C225.724 47.1849 225.431 47.2071 225.222 47.2299C225.118 47.2412 225.037 47.2524 224.983 47.2605C224.957 47.2646 224.937 47.2678 224.925 47.2698C224.919 47.2708 224.915 47.2715 224.913 47.2719C224.912 47.272 224.912 47.2721 224.912 47.2721L224.912 47.272L224.913 47.2719Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M257.688 133.387L276.857 123.559"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M253.99 88.138L272.576 78.6992"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M231.804 75.2942L250.389 65.8555"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M225.576 65.7591L244.162 56.3203"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M205.921 55.6348L224.798 46.3906"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M259.439 97.677L278.025 88.2383"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M225.207 46.4375L207.96 55.5348L225.965 65.5797L231.84 75.6246L255.531 89.46L258.563 93.6296L259.132 97.9887V132.672L274.863 124.522L278.274 121.3V90.2181L277.706 86.238L275.621 81.6894L272.778 79.036L250.982 66.5273L245.297 56.4824L228.997 47.5747L225.207 46.4375Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>

        {/* Folder RightBottom */}
        <motion.g
          className="folder"
          initial="initial"
          custom={2}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-red"
              d="M281.697 150.893C280.183 150.019 278.887 148.649 277.81 146.783C276.733 144.917 276.193 143.109 276.191 141.357V103.213C276.191 101.465 276.731 100.28 277.81 99.6591C278.889 99.0382 280.185 99.1632 281.697 100.034L298.214 109.57L303.72 119.106L325.742 131.821C327.256 132.695 328.553 134.067 329.632 135.936C330.711 137.805 331.25 139.612 331.248 141.357V173.144C331.248 174.892 330.709 176.079 329.632 176.703C328.555 177.327 327.258 177.2 325.742 176.323L281.697 150.893Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M296.936 90.8578C296.936 90.8578 296.936 90.8577 296.821 90.1746C296.432 89.1887 296.432 89.2015 296.432 89.2015L296.433 89.2012L296.436 89.2007L296.445 89.1992C296.451 89.198 296.46 89.1965 296.471 89.1946C296.492 89.191 296.522 89.1861 296.56 89.1804C296.635 89.1691 296.741 89.1417 296.871 89.1276C297.13 89.0993 297.492 89.0718 297.907 89.0744C298.713 89.0794 300.061 89.3222 301.012 89.8698L301.013 89.8702L317.733 99.5237L323.239 109.06L345.058 121.657C346.733 122.624 348.13 124.121 349.268 126.093C350.407 128.064 351.004 130.021 351.002 131.953V163.739C351.002 165.792 349.894 167.507 348.541 168.291L347.663 166.776C348.464 166.312 349.25 165.181 349.25 163.739V131.951C349.252 130.392 348.772 128.735 347.752 126.968C346.731 125.201 345.535 123.955 344.182 123.174L321.957 110.342L316.451 100.806L300.138 91.3876L300.138 91.3874C299.576 91.0641 298.773 90.7772 298.08 90.7729C297.746 90.7708 297.453 90.7931 297.245 90.8158C297.141 90.8271 297.059 90.8384 297.006 90.8465C296.979 90.8505 296.959 90.8537 296.948 90.8557C296.942 90.8567 296.938 90.8574 296.936 90.8578C296.935 90.8579 296.934 90.858 296.934 90.858L296.935 90.858L296.936 90.8578Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M329.71 176.973L348.879 167.145"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M326.013 131.724L344.598 122.285"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M303.826 118.88L322.412 109.441"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M297.599 109.345L316.184 99.9062"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M277.943 99.2207L296.821 89.9766"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M331.462 141.263L350.048 131.824"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-red"
            d="M297.228 90.0234L279.981 99.1207L297.986 109.166L303.862 119.21L327.553 133.046L330.585 137.215L331.154 141.575V176.258L346.884 168.108L350.296 164.886V133.804L349.727 129.824L347.642 125.275L344.799 122.622L323.004 110.113L317.318 100.068L301.019 91.1606L297.228 90.0234Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
          <motion.g
            className="red-glow"
            initial="initial"
            variants={redGlowVariants}
            custom={1}
          >
            <motion.g
              id="Ellipse 25_2"
              filter={`url(#${redGlow2Id})`}
              animate="pulse"
              variants={redGlowPulseVariants}
              custom={1}
            >
              <ellipse
                cx="6"
                cy="6.31972"
                rx="6"
                ry="6.31972"
                transform="matrix(0.866025 0.5 0 1 298 130.883)"
                fill="#F87171"
              />
            </motion.g>
          </motion.g>
        </motion.g>

        {/* Folder MiddleTop */}
        <motion.g
          className="folder"
          initial="initial"
          custom={0}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-green"
              d="M72.0809 108.061C70.5668 107.187 69.2711 105.817 68.1939 103.951C67.1166 102.085 66.577 100.277 66.5752 98.5251V60.3808C66.5752 58.6325 67.1147 57.4479 68.1939 56.827C69.273 56.2061 70.5686 56.3312 72.0809 57.2021L88.5978 66.7382L94.1035 76.2743L116.126 88.9891C117.64 89.8632 118.937 91.2348 120.016 93.1039C121.095 94.9729 121.634 96.78 121.632 98.5251V130.312C121.632 132.06 121.093 133.247 120.016 133.871C118.939 134.495 117.642 134.368 116.126 133.491L72.0809 108.061Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M87.3194 48.0258C87.3194 48.0258 87.3198 48.0257 87.2047 47.3426C86.8154 46.3567 86.8154 46.3695 86.8154 46.3695L86.8171 46.3692L86.82 46.3686L86.8283 46.3672C86.8349 46.366 86.8437 46.3644 86.8545 46.3626C86.8762 46.3589 86.9062 46.3541 86.9437 46.3484C87.0186 46.3371 87.1246 46.3097 87.2546 46.2955C87.5137 46.2673 87.8755 46.2398 88.291 46.2424C89.0969 46.2474 90.4452 46.4902 91.3959 47.0378L91.3967 47.0382L108.117 56.6916L113.623 66.2277L135.442 78.8251C137.117 79.7922 138.514 81.2893 139.652 83.2605C140.79 85.2317 141.388 87.1889 141.385 89.1206V120.907C141.385 122.96 140.278 124.675 138.924 125.459L138.046 123.944C138.847 123.48 139.634 122.349 139.634 120.907V89.1187C139.636 87.5602 139.156 85.9033 138.135 84.1363C137.115 82.3694 135.919 81.1232 134.566 80.342L112.34 67.5099L106.835 57.9738L90.5217 48.5555L90.5214 48.5553C89.9599 48.2321 89.1572 47.9452 88.4642 47.9409C88.1302 47.9388 87.837 47.9611 87.6285 47.9838C87.5247 47.9951 87.4432 48.0063 87.3897 48.0144C87.3629 48.0185 87.3432 48.0217 87.3313 48.0237C87.3254 48.0247 87.3214 48.0254 87.3194 48.0258C87.3186 48.0259 87.3181 48.026 87.3181 48.026L87.3185 48.0259L87.3194 48.0258Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M120.094 134.14L139.263 124.312"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M116.396 88.8919L134.982 79.4531"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M94.21 76.0481L112.796 66.6094"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M87.9824 66.513L106.568 57.0742"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M68.3271 56.3887L87.2047 47.1445"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M121.846 98.431L140.431 88.9922"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M87.6121 47.1875L70.3652 56.2848L88.3702 66.3297L94.2456 76.3746L117.936 90.21L120.969 94.3796L121.537 98.7387V133.422L137.268 125.272L140.68 122.05V90.9681L140.111 86.988L138.026 82.4394L135.183 79.786L113.388 67.2773L107.702 57.2324L91.4027 48.3247L87.6121 47.1875Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>

        {/* Folder MiddleMiddle */}
        <motion.g
          className="folder"
          initial="initial"
          custom={1}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-green"
              d="M140.31 153.549C138.796 152.675 137.501 151.305 136.423 149.439C135.346 147.574 134.807 145.765 134.805 144.013V105.869C134.805 104.121 135.344 102.936 136.423 102.315C137.502 101.694 138.798 101.819 140.31 102.69L156.827 112.226L162.333 121.763L184.356 134.477C185.87 135.351 187.166 136.723 188.245 138.592C189.324 140.461 189.863 142.268 189.861 144.013V175.8C189.861 177.549 189.323 178.735 188.245 179.359C187.168 179.983 185.871 179.856 184.356 178.979L140.31 153.549Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M155.549 93.514C155.549 93.514 155.549 93.514 155.434 92.8308C155.045 91.8449 155.045 91.8578 155.045 91.8578L155.047 91.8575L155.049 91.8569L155.058 91.8554C155.064 91.8543 155.073 91.8527 155.084 91.8509C155.106 91.8472 155.136 91.8423 155.173 91.8367C155.248 91.8254 155.354 91.798 155.484 91.7838C155.743 91.7556 156.105 91.7281 156.52 91.7306C157.326 91.7356 158.675 91.9785 159.625 92.526L159.626 92.5265L176.346 102.18L181.852 111.716L203.671 124.313C205.347 125.281 206.744 126.778 207.882 128.749C209.02 130.72 209.617 132.677 209.615 134.609V166.395C209.615 168.449 208.508 170.163 207.154 170.948L206.276 169.432C207.077 168.968 207.863 167.838 207.863 166.395V134.607C207.865 133.048 207.385 131.392 206.365 129.625C205.345 127.858 204.149 126.611 202.796 125.83L180.57 112.998L175.064 103.462L158.751 94.0438L158.751 94.0436C158.189 93.7204 157.387 93.4335 156.694 93.4291C156.36 93.4271 156.066 93.4493 155.858 93.472C155.754 93.4834 155.673 93.4946 155.619 93.5027C155.592 93.5067 155.573 93.51 155.561 93.512C155.555 93.513 155.551 93.5137 155.549 93.514C155.548 93.5142 155.548 93.5143 155.548 93.5143L155.548 93.5142L155.549 93.514Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M188.323 179.629L207.493 169.801"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M184.626 134.38L203.212 124.941"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M162.439 121.536L181.025 112.098"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M156.212 112.001L174.798 102.562"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M136.557 101.877L155.434 92.6328"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M190.075 143.919L208.661 134.48"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M155.842 92.6758L138.595 101.773L156.6 111.818L162.475 121.863L186.166 135.698L189.198 139.868L189.767 144.227V178.91L205.498 170.761L208.909 167.539V136.456L208.34 132.476L206.256 127.928L203.413 125.274L181.617 112.766L175.931 102.721L159.632 93.8129L155.842 92.6758Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>

        {/* Folder MiddleBottom */}
        <motion.g
          className="folder"
          initial="initial"
          custom={2}
          variants={folderVariants}
        >
          <g className="innder-folder">
            <motion.path
              className="folder-green"
              d="M212.33 197.135C210.816 196.261 209.52 194.891 208.443 193.025C207.366 191.159 206.826 189.351 206.824 187.599V149.455C206.824 147.707 207.364 146.522 208.443 145.901C209.522 145.28 210.818 145.405 212.33 146.276L228.847 155.812L234.353 165.349L256.375 178.063C257.889 178.937 259.186 180.309 260.265 182.178C261.344 184.047 261.883 185.854 261.881 187.599V219.386C261.881 221.135 261.342 222.321 260.265 222.945C259.188 223.569 257.891 223.442 256.375 222.565L212.33 197.135Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M227.568 137.1C227.568 137.1 227.569 137.1 227.454 136.417C227.064 135.431 227.064 135.444 227.064 135.444L227.066 135.443L227.069 135.443L227.077 135.441C227.084 135.44 227.093 135.439 227.104 135.437C227.125 135.433 227.155 135.428 227.193 135.423C227.268 135.411 227.374 135.384 227.504 135.37C227.763 135.342 228.125 135.314 228.54 135.317C229.346 135.322 230.694 135.564 231.645 136.112L231.646 136.112L248.366 145.766L253.872 155.302L275.691 167.899C277.366 168.866 278.763 170.363 279.901 172.335C281.039 174.306 281.637 176.263 281.635 178.195V209.981C281.635 212.034 280.527 213.749 279.173 214.534L278.295 213.018C279.096 212.554 279.883 211.424 279.883 209.981V178.193C279.885 176.634 279.405 174.977 278.384 173.21C277.364 171.444 276.168 170.197 274.815 169.416L252.589 156.584L247.084 147.048L230.771 137.63L230.77 137.63C230.209 137.306 229.406 137.019 228.713 137.015C228.379 137.013 228.086 137.035 227.877 137.058C227.774 137.069 227.692 137.081 227.639 137.089C227.612 137.093 227.592 137.096 227.58 137.098C227.574 137.099 227.57 137.1 227.568 137.1C227.568 137.1 227.567 137.1 227.567 137.1L227.568 137.1L227.568 137.1Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M260.343 223.215L279.512 213.387"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M256.646 177.966L275.231 168.527"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M234.46 165.122L253.046 155.684"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M228.231 155.587L246.817 146.148"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M208.577 145.467L227.455 136.223"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M262.095 187.505L280.68 178.066"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M227.862 136.266L210.615 145.363L228.62 155.408L234.496 165.453L258.186 179.288L261.219 183.458L261.787 187.817V222.5L277.518 214.35L280.93 211.129V180.046L280.361 176.066L278.276 171.518L275.433 168.864L253.638 156.355L247.952 146.311L231.653 137.403L227.862 136.266Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>

        {/* Folder LeftTop */}
        <motion.g
          className="folder"
          initial="initial"
          custom={0}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-green"
              d="M6.50566 158.096C4.9916 157.222 3.69594 155.852 2.61866 153.986C1.54139 152.12 1.00184 150.312 1 148.56V110.416C1 108.668 1.53955 107.483 2.61866 106.862C3.69777 106.241 4.99344 106.366 6.50566 107.237L23.0226 116.773L28.5283 126.309L50.5509 139.024C52.065 139.898 53.3616 141.27 54.4407 143.139C55.5198 145.008 56.0584 146.815 56.0566 148.56V180.347C56.0566 182.095 55.5179 183.282 54.4407 183.906C53.3634 184.53 52.0668 184.403 50.5509 183.526L6.50566 158.096Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M21.7442 98.0609C21.7442 98.0609 21.7446 98.0608 21.6295 97.3777C21.2402 96.3918 21.2402 96.4046 21.2402 96.4046L21.2419 96.4043L21.2448 96.4038L21.2531 96.4023C21.2597 96.4011 21.2685 96.3996 21.2793 96.3978C21.301 96.3941 21.331 96.3892 21.3685 96.3836C21.4434 96.3723 21.5494 96.3448 21.6794 96.3307C21.9385 96.3025 22.3003 96.2749 22.7158 96.2775C23.5217 96.2825 24.87 96.5254 25.8207 97.0729L25.8215 97.0734L42.5417 106.727L48.0474 116.263L69.8668 128.86C71.5418 129.827 72.939 131.324 74.0771 133.296C75.2151 135.267 75.8123 137.224 75.8103 139.156V170.942C75.8103 172.995 74.7028 174.71 73.3492 175.494L72.4712 173.979C73.2722 173.515 74.0588 172.385 74.0588 170.942V139.154C74.0604 137.595 73.5804 135.938 72.5602 134.171C71.5401 132.405 70.344 131.158 68.991 130.377L46.7652 117.545L41.2595 108.009L24.9465 98.5907L24.9462 98.5905C24.3847 98.2672 23.582 97.9803 22.8891 97.976C22.555 97.9739 22.2618 97.9962 22.0533 98.0189C21.9495 98.0302 21.868 98.0415 21.8145 98.0496C21.7877 98.0536 21.768 98.0568 21.7561 98.0589C21.7502 98.0599 21.7462 98.0606 21.7442 98.0609C21.7434 98.0611 21.7429 98.0612 21.7429 98.0612L21.7433 98.0611L21.7442 98.0609Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M54.5186 184.176L73.688 174.348"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M50.8213 138.927L69.4069 129.488"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M28.6348 126.083L47.2204 116.645"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M22.4072 116.548L40.9928 107.109"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M2.75195 106.424L21.6295 97.1797"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M56.2705 148.466L74.8561 139.027"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M22.036 97.2266L4.78906 106.324L22.7941 116.369L28.6694 126.414L52.3602 140.249L55.3926 144.419L55.9612 148.778V183.461L71.6919 175.311L75.1033 172.089V141.007L74.5348 137.027L72.45 132.478L69.6071 129.825L47.8115 117.316L42.1258 107.271L25.8265 98.3637L22.036 97.2266Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>

        {/* Folder LeftMiddle */}
        <motion.g
          className="folder"
          initial="initial"
          custom={1}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-red"
              d="M74.7342 203.585C73.2201 202.711 71.9245 201.34 70.8472 199.475C69.7699 197.609 69.2304 195.8 69.2285 194.049V155.904C69.2285 154.156 69.7681 152.971 70.8472 152.35C71.9263 151.73 73.222 151.855 74.7342 152.726L91.2511 162.262L96.7568 171.798L118.779 184.512C120.293 185.387 121.59 186.758 122.669 188.627C123.748 190.496 124.287 192.303 124.285 194.049V225.835C124.285 227.584 123.746 228.77 122.669 229.394C121.592 230.018 120.295 229.892 118.779 229.014L74.7342 203.585Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M89.9727 143.549C89.9727 143.549 89.9731 143.549 89.858 142.866C89.4688 141.88 89.4688 141.893 89.4688 141.893L89.4704 141.893L89.4733 141.892L89.4816 141.891C89.4882 141.889 89.497 141.888 89.5079 141.886C89.5295 141.882 89.5595 141.878 89.597 141.872C89.6719 141.861 89.7779 141.833 89.9079 141.819C90.1671 141.791 90.5289 141.763 90.9443 141.766C91.7502 141.771 93.0986 142.014 94.0492 142.561L94.05 142.562L110.77 152.215L116.276 161.751L138.095 174.349C139.77 175.316 141.167 176.813 142.306 178.784C143.444 180.755 144.041 182.712 144.039 184.644V216.43C144.039 218.484 142.931 220.199 141.578 220.983L140.7 219.467C141.501 219.003 142.287 217.873 142.287 216.43V184.642C142.289 183.084 141.809 181.427 140.789 179.66C139.769 177.893 138.573 176.647 137.22 175.865L114.994 163.033L109.488 153.497L93.1751 144.079L93.1747 144.079C92.6132 143.756 91.8105 143.469 91.1176 143.464C90.7835 143.462 90.4903 143.484 90.2818 143.507C90.178 143.519 90.0966 143.53 90.043 143.538C90.0162 143.542 89.9966 143.545 89.9847 143.547C89.9787 143.548 89.9747 143.549 89.9727 143.549C89.9719 143.549 89.9714 143.549 89.9714 143.549L89.9718 143.549L89.9727 143.549Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M122.747 229.664L141.917 219.836"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M119.05 184.415L137.635 174.977"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M96.8633 171.572L115.449 162.133"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M90.6357 162.036L109.221 152.598"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M70.9805 151.912L89.858 142.668"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M124.499 193.954L143.085 184.516"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-red"
            d="M90.2655 142.715L73.0186 151.812L91.0236 161.857L96.8989 171.902L120.59 185.737L123.622 189.907L124.191 194.266V228.949L139.921 220.8L143.333 217.578V186.495L142.764 182.515L140.679 177.967L137.837 175.313L116.041 162.805L110.355 152.76L94.056 143.852L90.2655 142.715Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
          <motion.g
            className="red-glow"
            initial="initial"
            variants={redGlowVariants}
            custom={3}
          >
            <motion.g
              filter={`url(#${redGlow3Id})`}
              animate="pulse"
              variants={redGlowPulseVariants}
              id="Ellipse 25_3"
              custom={2}
            >
              <ellipse
                cx="6.24937"
                cy="6.58237"
                rx="6.24937"
                ry="6.58237"
                transform="matrix(0.866025 0.5 0 1 90.1758 182.887)"
                fill="#F87171"
              />
            </motion.g>
          </motion.g>
        </motion.g>

        {/* Folder LeftBottom */}
        <motion.g
          className="folder"
          initial="initial"
          custom={2}
          variants={folderVariants}
        >
          <g className="inner-folder">
            <motion.path
              className="folder-green"
              d="M146.753 247.174C145.239 246.3 143.943 244.93 142.866 243.064C141.788 241.199 141.249 239.39 141.247 237.638V199.494C141.247 197.746 141.787 196.561 142.866 195.94C143.945 195.319 145.241 195.444 146.753 196.315L163.27 205.851L168.775 215.388L190.798 228.102C192.312 228.976 193.609 230.348 194.688 232.217C195.767 234.086 196.305 235.893 196.304 237.638V269.425C196.304 271.174 195.765 272.36 194.688 272.984C193.61 273.608 192.314 273.481 190.798 272.604L146.753 247.174Z"
              fill="rgba(241, 245, 249, 0.3)"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.9"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M161.991 187.139C161.991 187.139 161.992 187.139 161.877 186.456C161.487 185.47 161.487 185.483 161.487 185.483L161.489 185.482L161.492 185.482L161.5 185.48C161.507 185.479 161.516 185.478 161.526 185.476C161.548 185.472 161.578 185.467 161.616 185.462C161.691 185.45 161.796 185.423 161.926 185.409C162.186 185.381 162.547 185.353 162.963 185.356C163.769 185.361 165.117 185.603 166.068 186.151L166.069 186.151L182.789 195.805L188.294 205.341L210.114 217.938C211.789 218.906 213.186 220.403 214.324 222.374C215.462 224.345 216.059 226.302 216.057 228.234V260.02C216.057 262.074 214.95 263.788 213.596 264.573L212.718 263.057C213.519 262.593 214.306 261.463 214.306 260.02V228.232C214.307 226.673 213.827 225.017 212.807 223.25C211.787 221.483 210.591 220.236 209.238 219.455L187.012 206.623L181.507 197.087L165.194 187.669L165.193 187.669C164.632 187.345 163.829 187.058 163.136 187.054C162.802 187.052 162.509 187.074 162.3 187.097C162.197 187.108 162.115 187.12 162.062 187.128C162.035 187.132 162.015 187.135 162.003 187.137C161.997 187.138 161.993 187.139 161.991 187.139C161.99 187.139 161.99 187.139 161.99 187.139L161.99 187.139L161.991 187.139Z"
              fill="rgba(241, 245, 249, 1)"
            />
            <path
              d="M194.766 273.254L213.935 263.426"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M191.068 228.005L209.654 218.566"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M168.882 215.161L187.467 205.723"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M162.654 205.626L181.24 196.188"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
            <path
              d="M142.999 195.502L161.877 186.258"
              stroke="rgba(241, 245, 249, 1)"
              strokeWidth="1.7"
            />
            <path
              d="M196.518 237.544L215.103 228.105"
              stroke="rgba(241, 245, 249, 0.5)"
              strokeWidth="1.7"
            />
          </g>
          <motion.path
            className="folder-green"
            d="M162.285 186.305L145.038 195.402L163.043 205.447L168.918 215.492L192.609 229.327L195.642 233.497L196.21 237.856V272.539L211.941 264.39L215.352 261.168V230.085L214.784 226.105L212.699 221.557L209.856 218.903L188.061 206.394L182.375 196.35L166.076 187.442L162.285 186.305Z"
            fill="rgba(241, 245, 249, 0.3)"
          />
        </motion.g>
      </g>

      {/* Filter definitions */}
      <defs>
        <filter
          id={redGlow1Id}
          x="152.157"
          y="40.6728"
          width="20.0782"
          height="23.1075"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2.4214" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_3513_375"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_3513_375"
            result="shape"
          />
        </filter>
        <filter
          id={redGlow2Id}
          x="293.157"
          y="128.364"
          width="20.0782"
          height="23.6778"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2.4214" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_3513_375"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_3513_375"
            result="shape"
          />
        </filter>
        <filter
          id={redGlow3Id}
          x="85.333"
          y="180.462"
          width="20.5098"
          height="24.2637"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2.4214" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow_3513_375"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow_3513_375"
            result="shape"
          />
        </filter>
      </defs>
    </motion.svg>
  );
}
